<template>
    <el-dialog :title="title" v-model="drawer" width="700px" center draggable :append-to-body="true" :destroy-on-close="true" @close="close">
        <el-form ref="ruleRefForm" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon size="small">
            <el-form-item label="企业名称" prop="name">
                <div v-if="form.name">{{ form.name }}</div>
                <!-- <el-input v-else v-model="form.name" placeholder="请输入企业名称" /> -->
            </el-form-item>
            <el-form-item label="企业代码类型" prop="codeType">
                <el-select v-model="form.codeType" placeholder="请选择企业代码类型">
                    <el-option label="统一社会信用代码(18 位)" :value="1" />
                    <el-option label="组织机构代码(9 位)" :value="2" />
                    <el-option label="营业执照注册号(15 位)" :value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="企业代码" prop="code">
                <el-input v-model="form.code" :maxLength="form.codeType==1?18:(form.codeType==2?9:15)" placeholder="请输入企业代码" />
            </el-form-item>
            <el-form-item label="法人姓名" prop="legalPersonaName">
                <el-input v-model="form.legalPersonaName"  placeholder="请输入法人姓名"/>
            </el-form-item>
            <el-form-item label="法人微信号" prop="legalPersonaWechat">
                <el-input v-model="form.legalPersonaWechat" placeholder="请输入法人微信号"/>
            </el-form-item>
            <el-form-item label="第三方联系电话" prop="componentPhone">
                <el-input v-model="form.componentPhone" maxLength="11" placeholder="请输入联系电话"/>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button size="small" @click="close">取消</el-button>
                <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Session } from '/@/utils/storage'
import api from '/@/api/commonApi'

export default {
    name: 'CreateShopInfo',
    components: {

    },
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '快速注册小程序'
        },
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer } = toRefs(props)
        const uploadBanner = ref()
        const uploadIcon = ref()
        const ruleRefForm = ref()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const state = reactive({
            uploadUrl: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            form: {
                name: null,
                code: null,
                codeType: 1,
                legalPersonaName: null,
                legalPersonaWechat: null,
                componentPhone: null
            },
            rules: {
                name: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
                code: [{ required: true, message: '请输入企业代码', trigger: 'blur' }],
                codeType: [{ required: true, message: '请选择企业代码类型', trigger: 'change' }],
                legalPersonaName: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
                legalPersonaWechat: [{ required: true, message: '请输入法人微信号', trigger: 'blur' }],
                componentPhone: [
                    { required: false, message: "手机号不能为空",trigger: "blur"}, 
                    {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
                ],
            },
            maxLength: 18,
        })

        // 获取当前企业主体
        const getEnterpriseInfo = () => {
            api.enterpriseInfo().then(res => {
                if (res.data) {
                    state.form.name = res.data.name
                    if (res.data.creditCode != null) {
                        state.form.code = res.data.creditCode
                        state.form.codeType = 1
                    } else if (res.data.organizationCode != null) {
                        state.form.code = res.data.organizationCode
                        state.form.codeType = 2
                    } else if (res.data.businessRegisterCode != null) {
                        state.form.code = res.data.businessRegisterCode
                        tate.form.codeType = 3
                    }
                }
            })
        }
        // 提交
        const submitForm = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
                if (valid) {
                    ElMessage.success("成功")
                    api.quickRegisterApp(state.form).then(res => {
                        ElMessage.success("已提交申请，请法人查看微信，并认证")
                        context.emit('update:dialogDrawer', false)
                    })
                }
            })
        }
        // 取消
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }



        onMounted(() => {
            getEnterpriseInfo()
        })
        return {
            drawer,
            close,
            submitForm,
            ruleRefForm,
            getEnterpriseInfo,
            ...toRefs(state)
        }
    }
}

</script>

<style lang="scss" scoped></style>